<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>库洛牌</title>
		<link rel="shortcut icon" href="图片/小圆logo.ico" type="image/x-icon">
		<style>
			div {
				position:absolute;         /*居中代码*/
			left:0;
			right:0;
			bottom:0;
			top:0;
			margin:auto;
			}
			
			@-webkit-keyframes madoka{
				from {
					-webkit-transform:rotateY(0deg);
				}
				to {
					-webkit-transform:rotateY(360deg);
				}
				
			}
			
			.flip-container {
	perspective: 1000;                  /*元素查看角度*/
	
			}
	/* flip the pane when hovered 
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}*/

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;          /*transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。*/

	position: relative;                    /*生成相对定位的元素，相对于其正常位置进行定位*/
}

/* hide back of pane during swap */
.front,.back {
	backface-visibility: hidden; /*当图片背对我们时不可见*/

	position:absolute;/*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。*/
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	/*z-index: 2; 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
	animation:madoka 3s linear infinite;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(0deg); /*背面图案（圆神）从一开始就背对我们*/
	
	animation:madoka 3s linear infinite;/*总时间3秒*/
	animation-delay:-1.5s;/*延时-1.5秒发动第二张图片*/
}

.skew{            /*让图片倾斜25度*/
				-webkit-transform:skew(-25deg,25deg);
				height:945px;
				width:420px;
			}
			.skew2{            /*让图片倾斜25度*/
				-webkit-transform:skew(25deg,-25deg);
				height:945px;
				width:420px;
			}
		</style>
	</head>
	<body>
		<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<img class="skew" src=" 图片/back.jpg" >
			
		</div>
		
		
		<div class="back">
			<img class="skew2" src=" 图片/Madoka.jpg">
			
		</div>
	</div>
</div>
		
	</body>
</html>